import { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { add, addTaskList, fetchChannelList } from './store/modules/counterStore'

function App() {
	const { count, taskList, channelList } = useSelector(state => state.counter)

	const dispatch = useDispatch()

	const clickHandle = () => {
		const action = add()
		dispatch(action)
	}

	useEffect(() => {
		dispatch(fetchChannelList())
	}, [dispatch])

	return (
		<>
			<h1>Vite + React</h1>
			<div className="card">
				<button onClick={clickHandle}>count is {count}</button>
				<button onClick={() => dispatch(addTaskList('vue'))}>add vue{taskList}</button>
				{channelList.map(item => (
					<div key={item.id}>{item.name}</div>
				))}
			</div>
		</>
	)
}

export default App
